<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    a{
     text-decoration:none;
     color:black;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <a href="/lesson15?name=javascript">Javascript</a>
  <a href="/lesson15?name=AJAX">AJAX</a>
  <a href="/lesson15?name=Promise">Promise</a>
  <ul></ul>
  <script type="text/javascript">
  var alist=document.querySelectorAll("a");
  var ul=document.querySelector("ul");
  alist.forEach(function (adom){
    adom.addEventListener("click",function (event){
      event.preventDefault();
      var xml=new XMLHttpRequest();
      var href=event.target.getAttribute("href");
      xml.open("GET",href);
      xml.onreadystatechange=function (){
        if(xml.status === 200 && xml.readyState === 4){
          var li=document.createElement("li");
          li.innerText=xml.response;
          ul.appendChild(li);
        }
      }
      xml.send();
    })
  })
  </script>
</body>
</html>
